import { createRouter, createWebHashHistory, RouteRecordRaw } from "vue-router";
import LoginVue from "../views/login/index.vue";
import { userInfoAPI } from "@/http/api";
import { ElMessage } from "element-plus";
import { useUserStore } from "@/store/user";
const routes: RouteRecordRaw[] = [
  {
    path: "/login",
    component: LoginVue,
  },
  {
    path: "/",
    redirect: "/index",
  },
  // 这个是暂时的，我们到最后会删除
  {
    path: "/",
    component: () => import("../views/home/index.vue"),
    children: [
      {
        path: "index",
        component: () => import("../views/index/index.vue"),
      },
    ],
  },
  // 再配一层，1级菜单，每个菜单对应一个1级路由
  // {
  //   path: "/ums",
  //   component: () => import("../views/home/index.vue"),
  //   // 这里面每个2级菜单，对应一个2级路由
  //   children: [{ path: "admin", component: LoginVue }],
  // },
  // 这里的路由配置是不能写死的，一定要在用户登录后，得到对应的 权限路由之后，再动态生成
  // 控制不同账户的权限
];

const router = createRouter({
  routes,
  history: createWebHashHistory(),
});

router.beforeEach((to, from, next) => {
  const store = useUserStore();
  let token = localStorage.getItem("token");
  // 因为每个页面都需要进行 权限的验证，所以在这里面判断 菜单数据有了没有，如果没有，我们需要发请求，来动态获取菜单数据
  if (store.menus.length === 0 && token) {
    // 我们会把请求成功后的菜单数据放在pinia里面
    userInfoAPI().then((res) => {
      if (res.code === 200) {
        // 把数据存到pinia
        // pinia里面可以直接修改数据
        store.menus = res.data.menus;
        // 存储用户名
        store.username = res.data.username;
        // 生成 当前这个用户能访问的路由
        // 现在当前用户能访问的所有的路由在 pinia 里面
        store.routes.forEach((p) => {
          const route: RouteRecordRaw = {
            path: "/" + p.name,
            name: p.name,
            component: () => import("../views/home/index.vue"),
            meta: {
              //在meta里面把对应的中文存起来，然后在路由里面获取，以生成面包屑的中文
              title: p.title,
            },
            // 当访问一级路由时，默认跳转到第一个子路由
            children: p.children.map((item) => ({
              path: item.name,
              name: item.name,
              component: () => import(`../views/${p.name}/${item.name}.vue`),
              meta: {
                title: item.title,
              },
            })),
          };
          if (p.children[0]) {
            route.redirect = `/${p.name}/${p.children[0]?.name}`;
          }
          // 路由里面提供了一个方法，用来动态添加路由的
          router.addRoute(route);
        });
        // 要在路由添加进来之后重新跳转到一个指定的路由,然后才能在动态路由生成之后再跳转到指定的路由
        next(to.fullPath);
      }
    });
  }
  // 判断有无token,如果没有token,并且访问的不是login就跳转回login
  else if (!token && to.path !== "/login") {
    ElMessage.error("请先登录~");
    next("/login");
  }
  // 如果已经登录，不能直接通url回到登录页
  else if (token && store.menus.length !== 0 && to.path === "/login") {
    ElMessage.warning("请先退出用户，再重新登录");
    // 不让用户访问登录页，跳转回原来的页面
    next(from.fullPath);
  } else {
    next();
  }
});

export default router;
